import React, { useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import { Spin } from 'antd'
import axios from 'axios'
import { connect } from 'react-redux'

import Home from '../../pages/sandbox/home/Home'
import UserList from '../../pages/sandbox/user-manage/UserList'
import RoleList from '../../pages/sandbox/right-manage/RoleList'
import RightList from '../../pages/sandbox/right-manage/RightList'
import NoPermission from '../../pages/sandbox/noPermission/NoPermission'
import NewsAdd from '../../pages/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../pages/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../pages/sandbox/news-manage/NewsCategory'
import NewsPreview from '../../pages/sandbox/news-manage/NewsPreview'
import NewsUpdate from '../../pages/sandbox/news-manage/NewsUpdate'
import Audit from '../../pages/sandbox/audit-manage/Audit'
import AuditList from '../../pages/sandbox/audit-manage/AuditList'
import Unpublished from '../../pages/sandbox/publish-manage/Unpublished'
import Published from '../../pages/sandbox/publish-manage/Published'
import Sunset from '../../pages/sandbox/publish-manage/Sunset'


const LocalRouterMap = {
  '/home': Home,
  '/user-manage/list': UserList,
  '/right-manage/role/list': RoleList,
  '/right-manage/right/list': RightList,
  '/news-manage/add': NewsAdd,
  '/news-manage/draft': NewsDraft,
  '/news-manage/category': NewsCategory,
  '/news-manage/preview/:id': NewsPreview,
  '/news-manage/update/:id': NewsUpdate,
  '/audit-manage/audit': Audit,
  '/audit-manage/list': AuditList,
  '/publish-manage/unpublished': Unpublished,
  '/publish-manage/published': Published,
  '/publish-manage/sunset': Sunset,
}

function NewsRouter(props) {
  const [BackRouterList, setBackRouterList] = useState([])
  useEffect(() => {
    Promise.all([axios.get('/rights'), axios.get('/children')]).then((res) => {
      setBackRouterList([...res[0].data, ...res[1].data])
      // console.log([...res[0].data, ...res[1].data]);
    })
  }, [])
  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem('token'))
  const checkRouter = (item) => {
    return (
      LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    )
  }
  const checkUserPermission = (item) => {
    // console.log('checkUserPermission',item, rights.includes(item.key));
    return rights.includes(item.key)
  }
  return (
    <Spin size="large" spinning={props.isLoading}>
      <Switch>
        {/* exact 精确匹配 */}
        {BackRouterList.map((item) => {
          if (checkRouter(item) && checkUserPermission(item)) {
            return (
              <Route
                path={item.key}
                key={item.key}
                component={LocalRouterMap[item.key]}
                exact
              />
            )
          } else {
            return null
          }
        })}
        <Redirect from="/" to="/home" exact />
        {BackRouterList.length > 0 && (
          <Route path="*" component={NoPermission} />
        )}
      </Switch>
    </Spin>
  )
}

const mapStateToProps = ({ LoadingReducer: { isLoading } }) => {
  return {
    isLoading
  }
}
// const mapDispatchToProps = (dispatch: Dispatch<any>) => { dispatch }

export default connect(mapStateToProps)(NewsRouter)